<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝列表导航案例</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .taobao_list {
            float: left;
            border-top: 1px solid #f4f4f4;
        }

        .taobao_list ul {
            width: 292px;
            overflow: hidden;
        }

        .taobao_list ul li {
            float: left;
            width: 71px;
            height: 75px;
            border: 1px solid #f4f4f4;
            border-top-color: transparent;
            border-left-color: transparent;
        }

        .taobao_list ul li a {
            text-align: center;
            display: block;
            font-size: 12px;
            color: #888;
        }

        .taobao_list ul li a span {
            width: 24px;
            height: 24px;
            background: url("images/taobao_list.png") no-repeat 0 0;
            background-size: 24px 597px;
            display: inline-block;
            margin-top: 12px;
        }

        .taobao_list ul li a span.span1 {
            background-position: 0 0;
        }

        .taobao_list ul li a span.span2 {
            background-position: 0 -44px;
        }

        .taobao_list ul li a span.span3 {
            background-position: 0 -88px;
        }

        /*    下面的继续算大小即可    */
    </style>
</head>
<body>
<div class="taobao_list">
    <ul>
        <li>
            <a href="#">
                <span class="span1"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span2"></span>
                <p>旅行</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span3"></span>
                <p>车险</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span4"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span5"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span6"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span7"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span8"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span9"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span10"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span11"></span>
                <p>充话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="span12"></span>
                <p>充话费</p>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
